<template>
    <div class="order_info_list_view bbx-cell-form-view" v-if="info">
        <div :class="getformItem">
            <div class="order_info form-view-row bbx-form-cell-item" :class="getformItemClass">
                <div class="label">{{ $t('common.fields.orderSerialNumber.displayName') }}：</div>
                <div class="content_div">{{ info.orderNum }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item" :class="getformItemClass">
                <div class="label">{{ $t('order.detailV2.orderStatus') }}：</div>
                <div class="content_div">
                    <div class="state" :style="{ background: getStatusObj(info.logisticsState)['color'] }"
                        v-if="info.logisticsState">{{ getStatusObj(info.logisticsState)['name'] }}</div>
                </div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('order.detailV2.serviceMethod') }}：</div>
                <div class="content_div" v-if="info.serviceType">{{ getServiceObj(info.serviceType)['name'] }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item" v-if="info.serviceType != 1">
                <div class="label">{{ $t('order.detailV2.appointmentTime') }}：</div>
                <div class="content_div">{{ info.appointmentTime | formatTime }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('order.component.consignee') }}：</div>
                <div class="content_div">
                    <span>{{ info.name }}</span>
                    <span>{{ info.contactsPhone }}</span>
                </div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('common.base.locationMap.detail') }}：</div>
                <div class="content_div">{{ info.address }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('order.detailV2.orderTime') }}：</div>
                <div class="content_div">{{ info.createTime | formatTime }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('order.detailV2.paymentTime') }}：</div>
                <div class="content_div">{{ info.payTime | formatTime }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('common.form.preview.pay.payMethod') }}：</div>
                <div class="content_div" v-if="info.payType">
                    <img v-if="[1, 2, 3].includes(info.payType)" :src="payIconList[info.payType - 1]" alt="" />
                    {{ getPayType(info.payType)['name'] }}
                </div>
                <div class="content_div" v-else>{{ $t('common.paas.view.designer.workFlow.commonSwitchList.0.label') }}
                </div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item" v-if="pointsEnable && info.memberPoints">
                <div class="label">{{ $t('common.member.point') }}：</div>
                <div class="content_div">{{ formatNum(info.memberPoints) }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item" v-if="balanceEnable && info.memberBalance">
                <div class="label">{{ $t('common.member.balance') }}：</div>
                <div class="content_div">{{ formatNum(info.memberBalance) }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('order.detailV2.amountPaid') }}：</div>
                <div class="content_div">{{ Money(info.payAmount) }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('order.detailV2.buyerMessage') }}：</div>
                <div class="content_div">{{ info.remarks }}</div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('order.component.orderRemarks') }}：</div>
                <div class="content_div">{{ info.adminRemarks }}</div>
            </div>
        </div>
        <div class="division_div">{{ $t('order.detailV2.shippingInfo') }}</div>
        <div :class="getformItem">
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('common.base.modeOfDespatch') }}：</div>
                <div class="content_div" v-if="info.serviceTypeList">
                    <span v-for="item in info.serviceTypeList" :key="item">
                        {{ getServiceObj(item)['name'] }}
                    </span>
                </div>
            </div>
            <div class="order_info form-view-row bbx-form-cell-item">
                <div class="label">{{ $t('order.detailV2.firstDeliveryTime') }}：</div>
                <div class="content_div">{{ info.firstLogisticsTime | formatTime }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import { Money } from 'src/util/format/number.ts'
import moment from 'moment'
import { getOssUrl } from '@src/util/assets'
import { t } from '@src/locales';
import memberMixin from '@src/modules/member/mixins/memberMixin.js';

const payIcon1 = getOssUrl('/pay_icon1.png');
const payIcon2 = getOssUrl('/pay_icon2.png');
const payIcon3 = getOssUrl('/pay_icon3.png');
const ORDER_STATUS = [
  { name: t('order.detailV2.toBePaid'), color: 'rgb(255, 112, 67)' },
  { name: t('order.detailV2.toBeShipped'), color: 'rgb(0, 146, 234)' },
  { name: t('common.base.usualStatus.delivered'), color: 'rgb(38, 198, 218)' },
  { name: t('common.base.usualStatus.finish'), color: 'rgb(0, 200, 83)' },
  { name: t('common.task.type.offed'), color: 'rgb(189, 189, 189)' },
];const SERVICE_STATUS = [{name: t('goods.component.expressDelivery'),},{name: t('task.setting.taskTypeSetting.manage.industryNames.name7'),}];
const PAYTYPE = [{name: t('order.detailV2.weChatPayment'),},{name: t('order.detailV2.alipayPayment'),},{name: t('order.listV2.limitSettlement'),}];
export default {
    mixins: [memberMixin],
    name: 'order-info-view',
    props: {
        info: {
            type: Object,
            default: () => {},
        },
        formCellCount: {
            type: Number,
            default: 1
        }
    },
    data () {
		return {
            payIconList: [payIcon1, payIcon2, payIcon3],
		}
	},
    computed: {
        getformItemClass() {
            return `bbx-form-cell-item-${this.formCellCount}`
        },
        getformItem() {
            return `bbx-cell-form-box-${this.formCellCount}`
        }
    },
    filters: {
        formatTime(time) {
            if (!time) return
            return moment(time).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    methods: {
        Money,
        getStatusObj(_type) {
            return ORDER_STATUS[_type - 1];
        },
        getServiceObj(_type) {
            return SERVICE_STATUS[_type - 1];
        },
        getPayType(_type) {
            return PAYTYPE[_type - 1] || '';
        },
        formatNum(num) {
            if (num > 0) return '-' + num;

            return num;
        },
    }
}
</script>
<style lang="scss" scoped>
.order_info_list_view{
  height: auto;
  padding-top: 10px;
    .order_info{
        display: flex;
        font-size: 14px;
        line-height: 22px;
        padding: 8px 16px;
        .label{
            width: 98px;
            height: 22px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
        }
        .content_div{
            display: flex;
            color: #595959;
            width: calc(100% - 100px);
            img{
                height: 22px;
            }
            .state{
                min-width: 52px;
                height: 22px;
                line-height: 22px;
                text-align: center;
                border-radius: 11px;
                color: #ffffff;
                background: $color-primary;
                font-size: 12px;
                padding: 0 8px;
            }
            span{
                margin-right: 10px;
            }
        }
        .color-red{
            color: #FF5219;
        }
    }
    .division_div{
        height: 48px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        line-height: 48px;
        background: #FAFAFA;
        box-sizing: border-box;
        padding-left: 16px;
        color: #262626;
    }
}
</style>